<template>
  <div class="roles">
    <!-- 用于搜索的部分 -->
    <div class="admin-search">
      <form action="" @submit.prevent="serach">
        <div class="admin-sear-top">
          <div>
            <i class="el-icon-search"></i>
            <span>筛选搜索</span>
          </div>
          <div>
            <el-button native-type="reset">重置</el-button>
            <el-button type="primary" native-type="submit">查询搜索</el-button>
          </div>
        </div>
        <div class="admin-search-bt">
          <span>角色名称:</span>
          <el-input
            class="search"
            size="small"
            placeholder="搜索账号或者姓名"
            v-model="pager.keyword"
          ></el-input>
        </div>
      </form>
    </div>

    <!--中间还有一块用于添加的 -->
    <div class="add-bar">
      <div class="l">
        <i class="el-icon-document"></i>
        <span>数据列表</span>
      </div>
      <div class="r">
        <el-button type="primary" @click="visiable = true">添加</el-button>
      </div>
    </div>

    <el-table :data="list" border style="width: 100%; text-align: center">
      <el-table-column align="center" prop="id" label="编号" width="60px">
      </el-table-column>
      <el-table-column align="center" prop="name" label="角色名称">
      </el-table-column>
      <el-table-column align="center" prop="description" label="描述">
      </el-table-column>
      <el-table-column align="center" prop="adminCount" label="用户数">
      </el-table-column>
      <el-table-column align="center" label="添加时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否启用">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#409eff"
            inactive-color="#cccccc"
            :active-value="1"
            :inactive-value="0"
            @change="
              (status) => {
                statusChange(scope.row.id, status);
              }
            "
          >
            >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            v-permission="'allocResource'"
            @click="allocResouce(scope.row.id)"
            >分配资源</el-button
          >
          <el-button type="text" v-permission="'allocMenu'">分配菜单</el-button>
          <el-button type="text">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="page-container">
      <el-pagination
        :current-page="pager.pageNum"
        :page-size="pager.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="pageChange"
        @size-change="pageSizeChange"
      >
      </el-pagination>
    </div>

    <AddRole :visible="visiable" @show="changeVisiable" />
  </div>
</template>
<script>
import { getRolesByPage, updateRoleStatus } from '@/request/api'
import AddRole from './components/AddRole.vue'
export default {
  data() {
    return {
      visiable: false,
      list: [],
      total: 0,
      pager: {
        keyword: '',
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    allocResouce(id) {
      // 跳转到一个新页面
      this.$router.push('/ums/allocResource?id=' + id)
    },
    changeVisiable(reload) {
      this.visiable = false
      reload && this.getRoles()
    },
    statusChange(id, status) {
      updateRoleStatus({ id, status }).then(res => {
        if (res.code === 200) {
          this.$message.success('修改成功')
        }
      })
    },
    serach() {
      this.pager.pageNum = 1
      this.getRoles()
    },
    pageChange(page) {
      this.pager.pageNum = page
      this.getRoles()
    },
    pageSizeChange(size) {
      this.pager.pageSize = size
      this.pager.pageNum = 1
      this.getRoles()
    },
    getRoles() {
      getRolesByPage({
        ...this.pager
      }).then(res => {
        if (res.code === 200) {
          this.list = res.data.list
          this.total = res.data.total
        }
      })
    }
  },
  created() {
    this.getRoles()
  },
  components: { AddRole },
}
</script>
<style lang = "less" scoped>
.roles {
  font-size: 14px;
  font-size: 14px;
  .admin-search {
    box-shadow: 0 0 4px 2px #ccc;
    padding: 10px;
    border-radius: 4px;
    .admin-sear-top {
      display: flex;
      justify-content: space-between;
    }
    .admin-search-bt {
      display: flex;
      align-items: center;
      .search {
        width: 200px;
        margin-left: 10px;
      }
    }
  }

  .add-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 0 4px 2px #ccc;
    margin: 20px auto;
    .l {
      span {
        margin-left: 10px;
      }
    }
  }
  .page-container {
    display: flex;
    justify-content: flex-end;
    padding: 20px;
  }
}
</style>